<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getByName } from '../api/mongodb';
import { useStore } from '../store/data';
import { useRoute } from 'vue-router';

const store = useStore()
onMounted(() => {
  let route = useRoute()
  console.log(route, route.path)
  store.routePath = route.path
  getInfo()
})

let activeName = ref<string>()
let activeTime = ref<string[]>(['all', 'month'])
type Weight = {
        'name': string,
        'value': string,
        [key: string]: string

    }
let tabList = reactive<string[]>([])
type Statistics = {
    [key: string]: {
        [key: string]: {
            'lowest': number | undefined,
            'lowestDate': string,
            'highest': number | undefined,
            'highestDate': string,
            'average': number | undefined
        }
    }
}
let statisticsList = reactive<Statistics>({})
type ComputeObj = {
    [key:string]: number;
}
let computeWeight:ComputeObj = {}
let computeCount:ComputeObj = {}
async function getInfo() {
    await getByName(null).then((res: Weight[])=> {
        tabList.push(...res.map(item => item.name))
        console.log(res, tabList)
        transformData(res)
    })
}
function transformData(data:Weight[]) {
    const time = new Date().getTime()
    function compute(type:string, name:string, time: string, weight: number) {
        computeWeight[type] += weight
        computeCount[type] += 1
        if (!statisticsList[name][type].lowest || statisticsList[name][type].lowest as number > weight) {
            statisticsList[name][type].lowest = weight
            statisticsList[name][type].lowestDate = time
        }
        if (!statisticsList[name][type].highest || statisticsList[name][type].highest as number < weight) {
            statisticsList[name][type].highest = weight
            statisticsList[name][type].highestDate = time
        }
    }
    data.forEach(item => {
        const name = item.name
        statisticsList[name] = {
            'all': {
                'lowest': undefined,
                'lowestDate': '',
                'highest': undefined,
                'highestDate': '',
                'average': undefined
            },
            'month':{
                'lowest': undefined,
                'lowestDate': '',
                'highest': undefined,
                'highestDate': '',
                'average': undefined
            },
            'season':{
                'lowest': undefined,
                'lowestDate': '',
                'highest': undefined,
                'highestDate': '',
                'average': undefined
            },
            'year':{
                'lowest': undefined,
                'lowestDate': '',
                'highest': undefined,
                'highestDate': '',
                'average': undefined
            }
        }
        // 每人都初始化计算数值
        computeCount = {
            'all': 0,
            'month': 0,
            'season': 0,
            'year': 0
        }
        computeWeight = {
            'all': 0,
            'month': 0,
            'season': 0,
            'year': 0
        }
        Object.keys(item).forEach(key => {
            if (key.includes('-')) {
                const weight = Number(item[key])
                // console.log(name, key, item[key])
                // 全部数据
                compute('all', name, key, weight)
                let keyTime = new Date(key).getTime()
                if (time - keyTime < 30 * 24 * 60 * 60 * 1000) {
                    // 月度
                    compute('month', name, key, weight)
                }
                if (time - keyTime < 90 * 24 * 60 * 60 * 1000) {
                    // 季度
                    compute('season', name, key, weight)
                }
                if (time - keyTime < 365 * 24 * 60 * 60 * 1000) {
                    // 年度
                    compute('year', name, key, weight)
                }
            }
        })
        const timeType = ['all', 'month', 'season', 'year']
        timeType.forEach(item => {
            statisticsList[name][item].average = Math.floor(computeWeight[item]/computeCount[item]*100)/100
        })
    })
}
function changeCollapse(list:string[]) {
    if (list.length > 2) {
        list.shift()
        activeTime.value = list
    }
}
</script>

<template>
    <van-tabs v-model:active="activeName">
        <van-tab v-for="name in tabList" :title="name">
            <van-collapse v-model="activeTime" @change="list => changeCollapse(list)">
                <van-collapse-item title="历史体重" name="all">
                    最低体重：<span class="lowest">{{ statisticsList[name].all.lowest }}</span><br>
                    最低体重日：{{ statisticsList[name].all.lowestDate }}<br>
                    最高体重：<span class="highest">{{ statisticsList[name].all.highest }}</span><br>
                    最高体重日：{{ statisticsList[name].all.highestDate }}<br>
                    平均体重：<span class="average">{{ statisticsList[name].all.average }}</span>
                </van-collapse-item>
                <van-collapse-item title="月度体重" name="month">
                    最低体重：<span class="lowest">{{ statisticsList[name].month.lowest }}</span><br>
                    最低体重日：{{ statisticsList[name].month.lowestDate }}<br>
                    最高体重：<span class="highest">{{ statisticsList[name].month.highest }}</span><br>
                    最高体重日：{{ statisticsList[name].month.highestDate }}<br>
                    平均体重：<span class="average">{{ statisticsList[name].month.average }}</span>
                </van-collapse-item>
                <van-collapse-item title="季度体重" name="season">
                    最低体重：<span class="lowest">{{ statisticsList[name].season.lowest }}</span><br>
                    最低体重日：{{ statisticsList[name].season.lowestDate }}<br>
                    最高体重：<span class="highest">{{ statisticsList[name].season.highest }}</span><br>
                    最高体重日：{{ statisticsList[name].season.highestDate }}<br>
                    平均体重：<span class="average">{{ statisticsList[name].season.average }}</span>
                </van-collapse-item>
                <van-collapse-item title="年度体重" name="year">
                    最低体重：<span class="lowest">{{ statisticsList[name].year.lowest }}</span><br>
                    最低体重日：{{ statisticsList[name].year.lowestDate }}<br>
                    最高体重：<span class="highest">{{ statisticsList[name].year.highest }}</span><br>
                    最高体重日：{{ statisticsList[name].year.highestDate }}<br>
                    平均体重：<span class="average">{{ statisticsList[name].year.average }}</span>
                </van-collapse-item>
            </van-collapse>
        </van-tab>
    </van-tabs>

</template>

<style scoped>
.lowest {
    color: var(--van-success-color);
}
.highest {
    color: var(--van-danger-color)
}
.average {
    color: var(--van-primary-color);
}
</style>